<template>
  <!-- 角色表单弹窗 -->
  <el-dialog
    v-model="dialog.visible"
    title="设置主账号"
    width="500px"
    height="500px"
    @close="handleCloseDialog"
  >
    <SmsCode ref="smsCodeRef" />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import SmsCode from "@/components/SmsCode/index.vue";
import TermAPI from "@/api/term";
import RoleAPI from "@/api/system/role";
import CommonAPI from "@/api/system/common";
import { ElMessage } from "element-plus";
// 定义 emit，用于通知外部关闭事件
const emit = defineEmits(["update:modelValue", "handleBindSubmit"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const smsCodeRef = ref();
const handleSubmit = async () => {
  console.log(smsCodeRef.value, "smsCodeRef.value.code");
  const formData = smsCodeRef.value.getFormData();
  console.log(formData, "formData");
  emit("handleSubmit", {
    mobile: formData.phone,
    code: formData.code,
  });
};
/***
 *
 * 弹框操作
 */
const dialog = reactive({
  title: "",
  visible: false,
});
// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}
// 监听外部传入的 modelValue，更新内部 visible 状态
watch(
  () => props.modelValue,
  (newValue) => {
    dialog.visible = newValue;
  }
);
onMounted(() => {});
</script>
<style style="scss" scoped>
::v-deep(.el-tabs__content) {
  min-height: 100px;
  display: flex;
  align-items: center;
}
</style>
